import React, { useMemo } from 'react';
import SummaryTable from '@/components/SummaryTable';
import TablePercentWrapper from '@/pages/SalaryManage/SalaryCalculate/Recheck/components/TablePercentWrapper';

import EmptyPlaceHolder from '@/pages/SalaryManage/components/EmptyPlaceHolder';
import style from './index.less';

const CompareTable = ({
    columnProcessor,
    tableHeader = [],
    dataSource = [],
    summaryFields,
    tableLoading
}) => {
    //  重新组装头部
    const renderColumns = useMemo(
        () =>
            columnProcessor
                .merge(tableHeader)
                .filter(item => !item.hidden)
                .map(item => {
                    if (item.scale) {
                        const { title } = item;
                        return {
                            ...item,
                            title,
                            render: (text, record) =>
                                record.$$isSummary || record.rateUpOrDown === 0 ? <EmptyPlaceHolder /> : (
                                    <TablePercentWrapper
                                        rate={text}
                                        type={
                                            ({
                                                1: 'up',
                                                2: 'down',
                                                0: ''
                                            })[record.rateUpOrDown]
                                        }
                                    />
                                )
                        };
                    }
                    return item;
                }),
        [columnProcessor, tableHeader]
    );

    const vvSummaryFields = useMemo(() => {
        if (!summaryFields) {
            return [];
        }

        if (Array.isArray(summaryFields)) {
            return summaryFields;
        }

        return summaryFields(tableHeader);
    }, [summaryFields, tableHeader]);


    return (
        <div className={style.applytable}>
            <SummaryTable
                bordered
                columns={renderColumns}
                rowKey="id"
                dataSource={dataSource}
                vvSummaryFields={vvSummaryFields}
                pagination={false}
                loading={tableLoading}
                scroll={{ y: 300 }}
            />
        </div>
    )
};

export default CompareTable;
